<?php
namespace app\admin\controller;

use core\V;
use core\Api;
use core\Func;
use app\admin\classes\AdminUser as User;

/**
 * 用户profile
 */


class Profile extends \C {

  public function index(){

    $this->wapper([
      "show"=>true,
      "title"=>"用户中心",
      "breadcrumb"=>["用户中心","用户信息"],
      "panel"=>"",
      "subtitle"=>"",

    ]);
    $user=$this->user;

    $this->VD([
      "apiBase"=>Func::getHash(),
    ]);

    $this->VueData([
      "nickname"=>$user->get("nickname"),
      "email"=>$user->get("email"),
      "mobile"=>$user->get("mobile"),
      "avatarUrl"=>$user->get("avatarUrl"),
    ]);

    return $this->display($this->page(),$this->VD());

  }
  // 修改密码的api
  public function changepassword(){

    $password=input("password");
    $newpassword=input("newpassword");

    empty($password) and Api::error('请输入原密码');
    empty($newpassword) and Api::error('请输入新密码');

    $this->user->set("password",md5($newpassword));

    if ($this->user){
      Api::ok('保存成功');
    }else{
      Api::error('遇到错误');
    }

  }
  // 修改信息的api
  public function savesettings(){
    $data=input("data");
    $this->user->setArr($data);
    if ($this->user){
      Api::ok('保存成功');
    }else{
      Api::error('遇到错误');
    }
  }

  protected function page(){

    $htmls= <<<'CODE'

    {layout name="/public/layout_index" /}

    <div class="row">
        <!-- Column -->
        <div class="col-lg-4 col-xlg-3 col-md-5">
            {:widget('user/profile_card')}
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-8 col-xlg-9 col-md-7">
            <div class="card">
                <!-- Nav tabs -->
                <ul class="tablist nav nav-tabs profile-tab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#userinfo" role="tab">账户信息</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#settings" role="tab">修改信息</a>
                    </li>
                    <li class="nav-item">
                      <a class="changepassword nav-link" data-toggle="tab" href="#changepassword" role="tab">修改密码</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">

                    <!--second tab-->
                    <div class="tab-pane active" id="userinfo" role="tabpanel">
                        ___userinfo___
                    </div>
                    <div class="tab-pane" id="settings" role="tabpanel">
                        ___settings___
                    </div>
                    <div class="tab-pane" id="changepassword" role="tabpanel">
                        ___changepassword___
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <script>
    $(function(){
      var hash=window.location.hash;
      if (hash){
        if (hash=="#password"){
          $('.changepassword').tab('show');
        }
      }
    });
    </script>



CODE;

  $htmls=str_replace("___userinfo___",$this->page_userinfo(),$htmls);
  $htmls=str_replace("___settings___",$this->page_settings(),$htmls);
  $htmls=str_replace("___changepassword___",$this->page_changepassword(),$htmls);

  return $htmls;
  }

  protected function page_userinfo(){

    $this->VD([
      "roleName"=>User::getInstance()->getRoleName(),
    ]);
    return <<<'CODE'
    <div id="userinfodiv">
      <div class="card-body">
          <div class="row">
              <div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
                  <br>
                  <p class="text-muted">{{form.nickname}}</p>
              </div>
              <div class="col-md-3 col-xs-6 b-r"> <strong>Mobile</strong>
                  <br>
                  <p class="text-muted">{{form.mobile}}</p>
              </div>
              <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                  <br>
                  <p class="text-muted">{{form.email}}</p>
              </div>
              <div class="col-md-3 col-xs-6"> <strong>Location</strong>
                  <br>
                  <p class="text-muted"></p>
              </div>
          </div>
          <hr>
          <h4 class="font-medium m-t-30">
            我的角色:
          </h4>
          <p class="m-t-30">
            {$roleName}
          </p>


          <hr>

      </div>
    </div>


    <script>

    var userinfo=new Vue({
      el:"#userinfodiv",
      data:{
        form:{$vue_data|raw}
      },
    });

    </script>


CODE;

  }

  protected function page_settings(){

    return <<<'CODE'
    <div id="settingsdiv">
      <div class="card-body">
          <form class="form-horizontal form-material" @submit.prevent="return false">
              <div class="form-group">
                  <label class="col-md-12">昵称</label>
                  <div class="col-md-12">
                    <input type="text"
                      v-model="form.nickname"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>
              <div class="form-group">
                  <label for="example-email" class="col-md-12">Email</label>
                  <div class="col-md-12">
                    <input
                      v-model="form.email"
                      type="email"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-md-12">手机</label>
                  <div class="col-md-12">
                    <input type="text"
                      v-model="form.mobile"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-md-12">头像</label>
                  <div class="col-md-12">
                    <c-upload-image
                      action="/admin/upload/image"
                      limit="1"
                      v-model="form.avatarUrl"
                    ></c-upload-image>
                  </div>
              </div>


              <div class="form-group">
                  <div class="col-sm-12">
                      <button @click="onSubmit" class="btn waves-effect waves-light btn-info">更新账户信息</button>
                  </div>
              </div>
          </form>
      </div>
    </div>

    <script>

    new Vue({
      el:"#settingsdiv",
      data:{
        apiBase:"{$apiBase|raw}",
        form:{$vue_data|raw}
      },
      methods: {
        init(){
          var that=this;
        },
        onSubmit() {

          var that=this;
          APP.ajax(this.apiBase+"/savesettings",{data:this.form},(res)=>{
            if (res.result){
              userinfo.form=that.form;
              APP.alert(res.data,true);
              APP.reload(2000);
            }else{
              APP.alert(res.data);
            }
          });
        }
      },
      mounted(){
        var that=this;
        this.$nextTick(function () {
          that.init();
        })
      }

    });

    </script>

CODE;
  }

  protected function page_changepassword(){

    return <<<'CODE'
    <div id="changepassworddiv">
      <div class="card-body">
          <form class="form-horizontal form-material" @submit.prevent="return false">
              <div class="form-group">
                  <label class="col-md-12">原密码</label>
                  <div class="col-md-12">
                    <input
                      v-model="form.password"
                      type="password"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>
              <div class="form-group">
                  <label for="example-email" class="col-md-12">新密码</label>
                  <div class="col-md-12">
                    <input
                      v-model="form.newpassword"
                      type="password"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-md-12">重复新密码</label>
                  <div class="col-md-12">
                    <input
                      v-model="form.newpassword2"
                      type="password"
                      placeholder=""
                      class="form-control form-control-line"
                    >
                  </div>
              </div>


              <div class="form-group">
                  <div class="col-sm-12">
                      <button @click="onSubmit" class="btn waves-effect waves-light btn-info">修改密码</button>
                  </div>
              </div>
          </form>
      </div>
    </div>


    <script>

    new Vue({
      el:"#changepassworddiv",
      data:{
        apiBase:"{$apiBase|raw}",
        form:{
          password:"",
          newpassword:"",
          newpassword2:""
        }

      },
      methods: {
        init(){
        },
        onSubmit() {
          if (this.form.password==""){
            APP.alert("请输入原密码");
            return;
          }
          if (this.form.newpassword==""){
            APP.alert("请输入新密码");
            return;
          }
          if (this.form.newpassword2==""){
            APP.alert("请再次输入新密码");
            return;
          }
          if (this.form.newpassword!=this.form.newpassword2){
            APP.alert("两次输入的密码不同");
            return;
          }
          var that=this;
          APP.ajax(this.apiBase+"/changepassword",this.form,(res)=>{
            if (res.result){
              that.form={
                password:"",
                newpassword:"",
                newpassword2:""
              };
              APP.alert(res.data,true);
            }else{
              APP.alert(res.data);
            }
          });
        }
      },
      mounted(){
        var that=this;
        this.$nextTick(function () {
          that.init();
        })
      }

    });

    </script>

CODE;
  }

}
